<template>
  <div class="tabBar">
    <van-nav-bar fixed :z-index="100">
      <span @click="debugDisplay" slot="title" v-text="title"></span>
      <van-icon 
        v-if="displayValue" 
        name="setting-o" 
        slot="right" 
        size="20px"
        color="#fff"
        @click="toDebugSetting" 
      />
    </van-nav-bar>
    <keep-alive>
      <router-view class="view" />
    </keep-alive>
    <van-tabbar route v-model="activeNumber">
      <van-tabbar-item to="/">
        <span>首页</span>
        <van-icon name="wap-home-o" size="28px" slot="icon" />
      </van-tabbar-item>
      <van-tabbar-item to="/applyList">
        <span>信贷申请</span>
        <van-icon name="cash-back-record" size="28px" slot="icon" />
      </van-tabbar-item>
      <van-tabbar-item to="/process">
        <span>进度查询</span>
        <van-icon name="todo-list-o" size="28px" slot="icon" />
      </van-tabbar-item>
      <van-tabbar-item to="/profile">
        <span>个人信息</span>
        <van-icon name="user-o" size="28px" slot="icon" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import { NavBar, Tabbar, TabbarItem, Icon } from 'vant';
  import { mapState, mapMutations } from 'vuex';

  export default {
    name: 'tabBar',
    components: {
      [NavBar.name]: NavBar,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
    },
    props: {
      active: {
        type: Number,
        defailt: 0
      }
    },
    data () {
      return {
        activeNumber: 0,
        clickTime:0,
				displayValue:false,
      }
    },
    computed: {
      ...mapState ([
        'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
      ]),
      title () {
        switch(this.active){
          case 0: return '首页'; break;
          case 1: return '信贷申请'; break;
          case 2: return '进度查询'; break;
          case 3: return '个人信息'; break;
          default: return '首页';
        }
      }
    },
    created () { 
      this.activeNumber = this.active;
      // 判断是否显示开发者模式
      this.displayValue = this.debugSetting.display ? true : false;
      // 修复一开始active不会自动获取的bug
      /* switch(this.$route.path){ 
        case '/': this.active = 0; break;
        case '/applyList': this.active = 1; break;
        case '/process': this.active = 2; break;
        case '/profile': this.active = 3; break;
        default: this.active = 0;
      } */
    },
    methods: {
      ...mapMutations ([ 
        'updateDebugSetting', // 将 this.updateDebugSetting(value) 映射为 this.$store.commit('updateDebugSetting', value)
      ]),
      toPage (url) {
        this.$router.push(url);
      },
      debugDisplay () { // 设置显示或关闭开发者模式
        this.clickTime++;
        let text = '';
        if (this.clickTime >= 2 && this.clickTime < 5){
          if(this.debugSetting != '' && this.debugSetting.display)
            text = '再点' + (5 - this.clickTime) + '次退出开发者模式';
          else
            text = '再点' + (5 - this.clickTime) + '次进入开发者模式';
          this.$UIplugins.message({message: text})
        }else if (this.clickTime >= 5) { //大于点击次数
          this.clickTime = 0;
          this.displayValue = !this.displayValue;
					this.updateDebugSetting({
						display: this.displayValue
					}); 
          if(this.debugSetting != '' && this.debugSetting.display)
            text = '已进入开发者模式';
          else
            text = '已退出开发者模式';
          this.$UIplugins.message({message: text})
        }
      },
      toDebugSetting () {
        this.$router.push('/debugSetting');
      }
    }
  }
</script>

<style lang="scss">
  .tabBar{
    .van-tabbar-item__icon{
      margin-bottom: 2px;
    }
    .view{margin: 46px 0 50px;}
  }
</style>